import { FC, useState } from "react";
import { produce } from "immer";
import { Typography } from "antd";
import { useTitle } from "ahooks";
import QuestionCard from "@/components/QuestionComponents/QuestionCard";
const { Title } = Typography;
const initQuestionList = [
  {
    id: "q1",
    title: "问卷1",
    isPublished: false,
    isStar: true,
    answerCount: 5,
    createAt: "2024-5-3",
  },
  {
    id: "q2",
    title: "问卷2",
    isPublished: true,
    isStar: true,
    answerCount: 5,
    createAt: "2024-5-3",
  },
  {
    id: "q3",
    title: "问卷3",
    isPublished: false,
    isStar: true,
    answerCount: 5,
    createAt: "2024-5-3",
  },
  {
    id: "q4",
    title: "问卷4",
    isPublished: true,
    isStar: true,
    answerCount: 5,
    createAt: "2024-5-3",
  },
];

import styled from "styled-components";
const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;
const List: FC = () => {
  useTitle("问卷列表");
  // 问卷列表数据
  const [questionList, setQuestionList] = useState(initQuestionList);

  const delQuestion = (id: string) => {
    setQuestionList(
      produce((draft) => {
        const index = draft.findIndex((item) => item.id === id);
        draft.splice(index, 1);
      }),
    );
  };
  const publishQuestion = (id: string) => {
    setQuestionList(
      produce((draft) => {
        const exist = draft.find((item) => item.id === id);
        if (exist) {
          exist.isPublished = true;
        }
      }),
    );
  };
  return (
    <>
      <div style={{ padding: "0px 150px" }}>
        <Header>
          <div className="left">
            <Title level={2}>我的问卷</Title>
          </div>
          <div className="right">(搜索)</div>
        </Header>
        <div>
          {questionList.map((question) => {
            return (
              <QuestionCard
                key={question.id}
                {...question}
                delQuestion={delQuestion}
                publishQuestion={publishQuestion}
              />
            );
          })}
        </div>
      </div>
    </>
  );
};
export default List;
